const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports={
  /***1.多入口配置:每个页面对应一个文件***/
  entry:{
    home:'./src/pages/home/index.js',
    about:'./src/pages/about/index.js',
    denglu:'./src/pages/denglu/index.js',
  },
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'js/[name].bundle.js',//[name]是占位符，会被替换成entry中定义的键名(home,about)
   /***4.输出配置:使用[name]占位符,来动态生成文件名***/
    assetModuleFilename:'images/[name][hash:8][ext]'//打包图片资源时，文件名和路径的设置规则  [name]是文件名，[hash:8]是文件内容的哈希值，取前8位，[ext]是文件的扩展名
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,  // 提取CSS到文件
          'css-loader'
        ]
      },
      // 新增:使用内置属性打包图片资源
      {
        test:/\.(png|jpe?g|gif|svg)/i,
        type:'asset/resource',//内置属性，打包图片资源
        generator:{
          filename:'images/[name][hash:8][ext]',
          publicPath:'../'//此处配置图片的路径，相对于css文件的路径(dist下,与login同级目录下)
        }
      }
    ]
  },
  plugins:[
    // 提取css文件
    new MiniCssExtractPlugin({
      filename:'css/[name].style.css'
    }),
    // 为home页面生成html文件
    new HtmlWebpackPlugin({
      template:'./public/home.html',
      filename:'home.html',
      chunks:['home']//指定该页面要引入的入口chunk(js文件和css文件)
    }),
    // 为about页面生成html文件
    new HtmlWebpackPlugin({
      template:'./public/about.html',
      filename:'about.html',
      chunks:['about']//指定该页面要引入的入口chunk(js文件和css文件)
    }),
    // 新增:为denglu页面生成html文件
    /***2.生成html文件:使用`HtmlWebpackPlugin`为每个页面创建HTML***/
    new HtmlWebpackPlugin({
      template:'./public/denglu.html',
      filename:'denglu.html',//生成的页面文件名
      /***3.拆分代码:通过chunks字段指定每个页面加载的JS文件***/
      chunks:['denglu']//指定该页面要引入的入口chunk(js文件和css文件)
    })
  ]
}